<script setup lang="ts">
import { objectOmit } from '@vueuse/core'

const props = withDefaults(
  defineProps<{
    min?: number
    max?: number
    precision?: number
    modelEvent?: 'input' | 'change'
    modelValue: string | number | undefined
  }>(),
  { precision: 0, modelEvent: 'input', min: 0 },
)
const emit = defineEmits(['update:modelValue', 'input'])
const attrs = useAttrs()
function handleChange(val: string | number | undefined) {
  const defaultValue = (props?.min as number) ?? undefined
  emit('update:modelValue', val ?? defaultValue)
}
</script>

<template>
  <a-input-number
    v-bind="objectOmit(attrs, ['update:model-value', 'model-value'])"
    focus
    :model-value="
      typeof modelValue === 'string' ? Number(modelValue) : modelValue
    "
    :model-event="modelEvent"
    :min="min ? Number(min) : undefined"
    :max="max ? Number(max) : undefined"
    :precision="precision"
    class="cloud-input-number"
    @input="emit('input', $event)"
    @update:model-value="handleChange"
  >
    <template
      v-for="(_, name) in $slots"
      #[name]="data"
      :key="name"
    >
      <slot
        :name="name"
        v-bind="data || {}"
      />
    </template>
  </a-input-number>
</template>

<style scoped lang="less">
.cloud-input-number {
  &.arco-input-outer-has-suffix {
    :deep(.arco-input-append) {
      font-size: 12px;
      background-color: var(--color-fill-1) !important;
    }
    :deep(.arco-input-wrapper) {
      padding-right: 0px !important;
      .arco-input-number-step {
        .arco-input-number-step-button:not(
            .arco-input-number-step-button-disabled
          ):hover {
          background-color: var(--color-fill-1) !important;
          border-color: var(--color-fill-2) !important;
        }
      }
    }
  }
  :deep(.arco-input-wrapper) {
    .arco-input-suffix {
      position: relative;
      .arco-input-number-step {
        .arco-input-number-step-button {
          background-color: transparent;
        }
      }
    }
  }
}
</style>
